<template>
	<view class="container">
		<!-- 专题图片 -->
		<image :src="subject.cover" mode="widthFix" class="subject-cover"></image>
		<!-- 专题头部 -->
		<view class="subject">
			<view class="title">{{subject.name}}</view>
			<view class="summary">{{subject.summary}}</view>
			<view class="info flex-row">
				<view class="text">章节数:{{subject.articles}}</view>
				<view class="text">浏览量:{{subject.views}}</view>
			</view>
		</view>
		<!-- 专题列表 -->
		<view class="list">
			<card 
				v-for="(item,index) in articleLists" 
				:key="index"
				:item="item"
			></card>
			<!-- 上拉加载 -->
			<uni-load-more v-show="articleLists.length" :status="loadStatus" ></uni-load-more>
		</view>
	</view>
</template>

<script>
	// 引入自定义组件Card    口诀: 一引二注三使用
	// import card from '../../components/card/index.vue';
	
	// 定义一个加载页面数据的常量
	const PAGE_SIZE = 4;
	export default {
		// 二注
		// components:{
		// 	card
		// },
		data() {
			return {
				index:0,
				subject:{},
				articleLists:[],
				query:{
					id:"",
					page:1
				},
				loadStatus:"more",  // 加载完之后显示是否更多
				isLoaded:false,  // 判断是否加载完成
			}
		},
		onLoad(options) {
			// 3.专题页传递过来的id值
			this.query.id = options.id;
			// console.log(this.query.id);
			// 1.获取专题详情
			this.getSubjectDetail();
			// 2.获取文章列表
			this.getArticleList();
		},
		// 3.下拉刷新
		onPullDownRefresh() {
			this.onRefresh();
		},
		// 4.下拉触底		
		onReachBottom() {
			this.getNextPage();
		},
		methods: {
			changeSwiper(e){
				// console.log(e.detail.current);				
			},
			// 1.获取专题详情
			getSubjectDetail(){
				this.$request({
					url:this.$api.getSubjectDetail,
					data:this.query,
					success:data => {
						// console.log(data);
						this.subject = data;
						// 动态设置专题详情的标题
						uni.setNavigationBarTitle({
							title:data.name
						})
					}
				})
			},
			// 2.获取文章列表
			getArticleList(){
				// 重置状态
				this.loadStatus = 'loading';
				this.$request({
					url:this.$api.getSubjectArticleList,
					data:this.query,
					success:data=>{
						// mysql中返回的数组是字符串数组,需要转换成对象数组
						// data = JSON.parse(data);
						// 截取等同数量的数据公式：slice包头不包尾 
						// (page-1)*pageSize, page*pageSize   page表示当前的页数,pageSize表示常量,每次渲染的数量
						data = data.slice((this.query.page-1)*PAGE_SIZE,PAGE_SIZE*this.query.page);
												
						// 3.x 取消下拉刷新
						uni.stopPullDownRefresh();
						
						// 判断数据是否加载完成
						this.isLoaded = data.length < PAGE_SIZE;
						
						// 更新加载的状态
						this.loadStatus = this.isLoaded ? 'noMore':'more';
						
						// 判断是否是第一页
						if(this.query.page > 1){  // 不是第一页
							this.articleLists.push(...data);
						}else{  // 第一页
							this.articleLists = data;
						}						
					},
					fail: () => {
						// 3.x 取消下拉刷新
						uni.stopPullDownRefresh();
					}
				})
			},
			// 3.下拉刷新
			onRefresh(){
				console.log('下拉刷新');
				// 3.1 初始化首页的文章列表,页面数为1
				this.query.page = 1;
				// 3.2 调用获取文章列表的接口
				this.getArticleList();
				// 3.x 取消下拉刷新
				// uni.stopPullDownRefresh();
			},
			// 4.下拉触底,加载下一页
			getNextPage(){
				if(this.isLoaded) return;								
				this.query.page++;				
				this.getArticleList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.subject-cover{
		width: 100%;
	}
	.subject{
		background-color: #FFF;
		padding: 20rpx 30rpx 30rpx;
		box-shadow: 0 8rpx 4rpx #F5F5F5;
		.title{
			font-size: 32rpx;
			font-weight: bold;
		}
		.summary{
			color: #777;
			margin: 10rpx 0;
			font-size: 24rpx;
		}
		.text{
			color: #999;
			font-size: 24rpx;
			margin-right: 40rpx;
		}
	}
</style>
